<style type="text/css">
    .configDetail {
        margin: 20px;
        float: left;
        min-width: 370px;
    }

    .configproperty span {
        display: inline-block;
        width: 200px;
    }

    .optionTitle {
        margin: 5px 10px;
        display: inline-block;
        font-size: 2em;
    }

    .configOption {
        height: 300px;
    }

    .configOption .jsoneditor {
        width: auto;
    }
</style>
<script type="text/javascript">
    LC.initToolbar({
        'new': LC.S.tools.toolNew,
        'cancel': LC.S.tools.toolCancel
    });
    $(document).ready(function (e) {
        LC.S.edit('.configDetail .edit', LC.S.serviceUrl, '${config._id}');
        var container = $('#configOption')[0];
        var options = {
            name: '配置详情',
            mode: 'view',
            modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
            error: function (err) {
                $('.optionError').text(err.toString());
                console.log(arguments);
            },
            change: function () {
                $('.saveOption').show();
            }
        };
        var json = ${options!"{}"};
        LC.S.optionEdit = editor = new JSONEditor(container, options, json);
    });
    LC.S.id = '${config._id}';
    LC.S.optionUpdate = function () {
        var data = {};
        data.id = LC.S.id;
        var value = {};
        try {
            value = LC.S.optionEdit.get();
            $('.optionError').text('');
        } catch (e) {
            $('.optionError').text(e.toString());
            return;
        }
        value = JSON.stringify(value);
        $.getJSON(LC.S.serviceUrl+LC.S.URL_UPDATE, [
                    {name: LC.const.UPDATE_ID, value: LC.S.id},
                    {name: LC.const.UPDATE_NAME, value: 'OPTION'},
                    {name: LC.const.UPDATE_VALUE, value: value}
                ],
                function (rs) {
                    if (rs.code == code.FINISH || rs.code == code.SUCCESS) {
                        alert(msg[rs.code]);
                    } else {
                        alert(msg[rs.code]);
                    }
                });

    }
</script>
<@com.toolbar />
<div class="configDetail">
    <div class="group">
        <div class="label">编　号：</div>
        <div class="value"><span>${config._id}</span></div>
    </div>
    <div class="group">
        <div class="label">名　称：</div>
        <div class="value"><span class="edit" type="text" regx="${check.name}" name="NAME">${config.name}</span>
        </div>
    </div>
    <div class="group">
        <div class="label">标　识：</div>
        <div class="value"><span class="edit" type="text" regx="${check.key}" name="KEY">${config.key}</span>
        </div>
    </div>
    <div class="group">
        <div class="label">描　述：</div>
        <div class="value">
            <span class="edit" type="textarea" name="DESCRIPT" nullable>${config.descript}</span></div>
    </div>
</div>
<div class="">
    <div><span class="optionTitle">配置详情</span>
        <button type="button" class="hide saveOption" onclick="LC.S.optionUpdate()">保存</button>
    </div>
    <div class="error optionError"></div>
    <div id="configOption" class="configOption"></div>
</div>